<!-- 左边菜单 
 父组件传递了一个属性isCollapse过来
-->
<template>
    <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
        :default-active="$route.path" text-color="#fff" @open="handleOpen" @close="handleClose" router
        :collapse="isCollapse">
        <el-menu-item :index="'/index/' + item.path" v-for="item in menu.slice(0, 1)" :key="item.name">
            <el-icon>
                <i :class="'iconfont ' + item.meta.icon"></i>
            </el-icon>
            <span>{{ $t(item.meta.title) }}</span>
        </el-menu-item>
        <el-sub-menu :index="item.path" v-for="item in menu.slice(1)" :key="item.name">
            <template #title>
                <el-icon>
                    <i :class="'iconfont ' + item.meta.icon"></i>
                </el-icon>
                <span>{{ $t(item.meta.title) }}</span>
            </template>
            <template v-for="items in item.children">
                <el-menu-item :index="'/index/' + item.path + '/' + items.path" v-if="!items.meta.hide">
                    <span>{{ $t(items.meta.title) }}</span>
                </el-menu-item>
            </template>
        </el-sub-menu>
    </el-menu>
</template>
<script lang="ts" setup>
import menu from '@/router/page'
import { reactive, ref } from 'vue'

defineProps({ isCollapse: { type: Boolean, required: false } })


const handleOpen = (key: string, keyPath: string[]) => {
    // console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
    // console.log(key, keyPath)
}
</script>
<style lang="less" scoped>
.el-menu {
    min-height: 100vh;

    &:not(.el-menu--collapse) {
        width: 200px;
    }
}
</style>